<script setup>
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import ChannerlSelect from './components/ChannerlSelect.vue'
import { artGetListService, artDeleteEditService } from '@/api/artucle'
import ArticleEdit from './components/ArticleEdit.vue'
const articleList = ref([]) //文章列表数据
const total = ref(0) //总条数
// 声明loading
const loading = ref(false)
// 定义请求参数对象（给后台用的）
const params = ref({
  // 这两个参数用于分页
  pagenum: 1, //当前页码
  pagesize: 5, //当前页需要的数据条数
  // 下边的两个参数用于搜索
  cate_id: '', //文章id
  state: '' //文章状态（可选值 已发布 草稿）
})
const getArticleList = async () => {
  // 开启loading
  loading.value = true
  // 将请求回来的数据给res （params.value给后台传的数据）
  const res = await artGetListService(params.value)
  // 将获取回来的数据给定义的articleList数组
  articleList.value = res.data.data
  total.value = res.data.total
  // 关闭loading
  loading.value = false
}
// 一页显示多少条的事件
const onSizeChange = (size) => {
  // 让当前列表回到第一页
  params.value.pagenum = 1
  // 把选择的一个页面显示多少条赋值给params里面的pagesize
  params.value.pagesize = size
  getArticleList()
}
// 切换分页时的事件
const onCurrentChange = (page) => {
  // 把获取回来的页码值赋值给params里面的pagenum
  params.value.pagenum = page
  getArticleList()
}
// 筛选中搜索逻辑
const onSearch = () => {
  params.value.pagenum = 1
  getArticleList()
}
// 筛选中重置逻辑
const onReset = () => {
  params.value.cate_id = ''
  params.value.state = ''
  getArticleList()
}
// 调用接口的方法
getArticleList()
// 定义组件articleEdit
const articleEdit = ref()
// 控制抽屉显示隐藏
const onAddArticle = () => {
  articleEdit.value.open({})
}
// visibleDrawer
// 编辑逻辑
const onEditArticle = (row) => {
  articleEdit.value.open(row)
}
// 删除逻辑
const onDeleteArticle = async (row) => {
  await ElMessageBox.confirm('你确认要删除该分类吗', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  console.log(row.id)
  // 调用删除接口并传id
  const res = await artDeleteEditService(row.id)
  console.log(res)
  articleList.value = res.data.data
  total.value = res.data.total
  ElMessage.success('删除成功')
}

// 添加或编辑成功事件 ,type是子组件传过来的值
const onSuccess = (type) => {
  if (type === 'add') {
    // 如果添加成功，需要跳转到最后一页
    // 算出来最后一页，Math.ceil()向上取整，total.value + 1  当前总条数+1 ， params.value.pagesize一页的条数。
    const lastPage = Math.ceil((total.value + 1) / params.value.pagesize)
    params.value.pagenum = lastPage
  }
  getArticleList()
}
</script>

<template>
  <page-container title="文章管理">
    <template #extra>
      <el-button @click="onAddArticle">添加文章</el-button>
    </template>
    <!-- 表单区域 -->
    <el-form inline>
      <el-form-item label="文章分类">
        <!-- 因为编辑和新增的时候这个下拉框会公用数据所以封装成一个组件 -->
        <!-- vue2 => v-model:value 和 @input 的简写 -->
        <!-- vue3 => v-model:modelValue 和 @undate:modelValue 的简写 -->
        <!-- v-model 相当于 v-model:modelValue的简写  modelValue（默认）可以自定义，如果这块自定义了，子组件中接收的值需要和这块的值一样 -->
        <ChannerlSelect v-model="params.cate_id"></ChannerlSelect>
      </el-form-item>
      <el-form-item label="发布状态">
        <el-select v-model="params.state">
          <el-option label="已发布" value="fabu" />
          <el-option label="草稿" value="caogao" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="articleList">
      <el-table-column label="分类" prop="cate_name">
        <template #default="{ row }">
          <!-- :underline="false" 去掉链接的下划线 -->
          <el-link type="primary" :underline="false">{{ row.tetle }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="发表时间" prop="pub_date"></el-table-column>
      <el-table-column label="状态" prop="state"></el-table-column>
      <el-table-column label="操作" prop="" width="180">
        <template #default="{ row }">
          <!-- circle  圆形 -->
          <!-- plain  镂空样式 -->
          <el-button
            circle
            plain
            type="primary"
            :icon="Edit"
            @click="onEditArticle(row)"
          ></el-button>
          <el-button
            circle
            plain
            type="danger"
            :icon="Delete"
            @click="onDeleteArticle(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- v-model:current-page  当前页码 |  v-model:page-size  当前页面条数   |  :page-sizes  可选页面条数   |    layout  组件位置  | :total  总条数 -->
    <!-- @size-change  选择一页显示多少条的时候事件     @current-change  换页的时候事件 -->
    <el-pagination
      style="margin-top: 20px; justify-content: flex-end"
      v-model:current-page="params.pagenum"
      v-model:page-size="params.pagesize"
      :page-sizes="[2, 3, 5, 10]"
      :background="true"
      layout=" jumper, total, sizes, prev, pager, next"
      :total="total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
    />

    <!-- 抽屉组件 -->
    <ArticleEdit ref="articleEdit" @success="onSuccess"></ArticleEdit>
  </page-container>
</template>

<style scss scoped>
::v-deep .el-form-item__content {
  width: 200px;
}
</style>
